<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .red {
                font-size: 12px;
                color: red;
            }
            .tips {
                color: red;
                font-size: 18px;
            }
        </style>
    </head>
    <body>
        <p>
            手机号：<input
                placeholder="请输入手机号"
                type="text"
                id="phoneNum"
                name="phone"
            /><span class="red">*</span>
        </p>
        <p>
            密码：<input
                placeholder="请输入密码"
                type="password"
                id="phoneNum"
                name="password"
            /><span class="red">*</span>
        </p>
        <p>
            姓名：<input
                placeholder="请输入中文姓名"
                type="text"
                id="phoneNum"
                name="name"
            /><span class="red">*</span>
        </p>
        <p class="tips">*项目为必填项目</p>
        <p>
            <button id="btn">注册</button>
        </p>
        <script>
            let btn = document.querySelector("#btn");
            let span = document.querySelectorAll(".red");
            let rules = {
                phone: {
                    reg: /^1[3-9]\d{9}$/,
                    errorMassage: "输入有误，请重新输入电话号码",
                },
                password: {
                    reg: /^[0-9A-Za-z]{6,10}$/,
                    errorMassage:
                        "请输入6-10位数字，字母（不包含下滑线和其他符号）",
                },
                name: {
                    reg: /[\u4e00-\u9fa5]+/,
                    errorMassage: "请输入中文名字",
                },
            };
            const inputArr = document.querySelectorAll("input");
            let account = {};
            for (let i = 0; i < inputArr.length; i++) {
                let input = inputArr[i];
                input.onblur = (event) => {
                    let target = event.target;
                    let value = target.value;
                    let name = target.name;
                    let rule = rules[name];
                    let reg = rule.reg;
                    let error = rule.errorMassage;
                    if (reg.test(value)) {
                        target.nextElementSibling.innerHTML = "";
                        account[name] = value;
                    } else {
                        target.nextElementSibling.innerHTML = error;
                    }
                    console.log(account);
                };
            }
            btn.onclick = () => {
                for (let i = 0; i < span.length; i++) {
                    if (span[i].innerHTML === "") {
                        localStorage.setItem(
                            "account",
                            JSON.stringify(account)
                        );
                        window.open("登录.html");
                    } else {
                        alert("请重新输入以上内容");
                        localStorage.removeItem("account");
                        return;
                    }
                }
            };
        </script>
    </body>
</html>
